<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Example: GGeoXml KML Overlay</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAcnHznFYiAVCZNRGaBDqskxTwM0brOpm-All5BF6PoaKBxRWWERRPOrSGTT5ENyzZ_sfOPuoV__3fdA"
            type="text/javascript"></script>
    <script type="text/javascript">

        var map;
        var geoXml;
        var toggleState = 1;

        function initialize() {
            if (GBrowserIsCompatible()) {
                //                geoXml = new GGeoXml("http://mapgadgets.googlepages.com/cta.kml");
                geoXml = new GGeoXml("http://localhost:8080/kml/test.kml");
                alert(geoXml);
                map = new GMap2(document.getElementById("map_canvas"));
                //map.setCenter(new GLatLng(41.875696, -87.624207), 11);
                map.addControl(new GLargeMapControl());
                map.addControl(new GLargeMapControl());
                map.addOverlay(geoXml);
            }
        }

        function toggleMyKml() {
            if (toggleState == 1) {
                map.removeOverlay(geoXml);
                toggleState = 0;
            } else {
                map.addOverlay(geoXml);
                toggleState = 1;
            }
        }
    </script>
</head>

<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
<br clear="all"/>
<br/>
<input type="button" value="Toggle KML" onClick="toggleMyKml();"/>
</body>
</html>